<template>
  <div class="flex-column justify-center align-items-center">
    <div style="margin: 5rem 0;text-align: center;width: 70rem">
      <div class="flex-row justify-center flex-wrap" style="margin-bottom: 4rem;">
        <img src="@/assets/wisdom/aqibig.png" style="width: 33rem;height: 20rem;min-width: 264px;min-height: 160px;" class="product-shadow" />
        <div style="margin-left: auto;text-align: left;width: 32rem;min-width: 360px">
          <h2 class="maincolor text-36" style="margin-bottom: 1rem;">空气质量监测及决策平台</h2>
          <div style="border-bottom:2px #f0f0f0 solid;width: 25rem;text-align: center;"></div>
          <div
            style="border-top:4px #5faee3 solid;width: 3.2rem;text-align: center;margin-top: -3px;height:0;
border-right:4px solid transparent;"
          ></div>
          <div style="margin-top: 1.5rem;">{{ article }}</div>
          <div class="btn">了解更多</div>
        </div>
      </div>
    </div>
    <div style="width: 100%;background:  #f9fafe;width:100% ;padding: 4rem 0;" class="flex-row justify-center">
      <div class="flex-row justify-center flex-wrap-reverse" style="width: 70rem;">
        <div style="margin-right: auto;text-align: left;width: 32rem;min-width: 360px" class="change-margin">
          <h2 class="maincolor text-36" style="margin-bottom: 1rem;">水环境监测及决策平台</h2>
          <div style="border-bottom:2px #f0f0f0 solid;width: 25rem;text-align: center;"></div>
          <div
            style="border-top:4px #5faee3 solid;width: 3.2rem;text-align: center;margin-top: -3px;height:0;
		border-left:0px solid transparent;border-right:4px solid transparent;"
          ></div>
          <div style="margin-top: 1.5rem;">{{ article }}</div>
          <div class="btn">了解更多</div>
        </div>
        <img src="@/assets/wisdom/waterbig.png" style="width: 33rem;height: 20rem;min-width: 264px;min-height: 160px;" class="product-shadow" />
      </div>
    </div>
    <div style="margin: 4rem 0 0;text-align: center;width: 70rem;">
      <div class="flex-row justify-center flex-wrap" style="margin-bottom: 4rem;">
        <img src="@/assets/wisdom/zxbg.png" style="width: 33rem;height: 20rem;min-width: 264px;min-height: 160px;" class="product-shadow" />
        <div style="margin-left: auto;text-align: left;width: 32rem;min-width: 360px;">
          <h2 class="maincolor text-36" style="margin-bottom: 1rem;">环保在线管理平台</h2>
          <div style="border-bottom:2px #f0f0f0 solid;width: 25rem;text-align: center;"></div>
          <div
            style="border-top:4px #5faee3 solid;width: 3.2rem;text-align: center;margin-top: -3px;height:0;
		border-left:0px solid transparent;border-right:4px solid transparent;"
          ></div>
          <div style="margin-top: 1.5rem;">{{ article }}</div>
          <div class="btn">了解更多</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article:
        '这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。这是公司这是公司简介的文案。这是公司简介的文案。这是公司简介的文案。简介的文案'
    };
  }
};
</script>

<style scoped lang="less">
.product-content {
  & > div {
    width: 22rem;
    height: auto;
    background: #ffffff;
    box-sizing: content-box;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    text-align: center;

    & .header {
      width: 100%;
      height: 6rem;
      background: #b2d5ec;
      border-radius: 5px 5px 0px 0px;
    }
  }
}

.circle {
  display: inline-block;
  width: 6.4rem;
  height: 6.4rem;
  background: #eaf4fb;
  border-radius: 50%;
  margin-top: -3.2rem;
}

.content {
  padding: 1rem 2rem;
}

.btn {
  text-align: center;
  margin-top: 1rem;
  width: 8em;
  padding: 0.4rem 0rem;
  // line-height: 2rem;
  background: linear-gradient(#4e8dec, #39baea);
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: box-shadow 2s;

  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0);

  // box-shadow: 0px 4px 15px 0px rgba(95, 174, 227, 0.6);

  &:hover {
    transition: box-shadow 0.3s;
    box-shadow: 0px 4px 15px 0px rgba(95, 174, 227, 0.6);
    // background: linear-gradient(#4e8dec88, #39baea88);
  }
}

.product-shadow {
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}
</style>
